<script lang="ts">
  export let size = "1em";
  export let color = "currentColor";
  export let open = false;
  export let side = "right";
</script>

<svg
  height={size}
  viewBox="0 0 24 24"
  transform={side === "left" ? "scale(-1, 1)" : ""}
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M22 5.5C22 4.67163 21.3284 4 20.5 4H3.5C2.67163 4 2 4.67163 2 5.5V18.5C2 19.3284 2.67163 20 3.5 20H20.5C21.3284 20 22 19.3284 22 18.5V5.5ZM20.5 6C20.5 5.72386 20.2761 5.5 20 5.5H16C15.7239 5.5 15.5 5.72386 15.5 6V18C15.5 18.2761 15.7239 18.5 16 18.5H20C20.2761 18.5 20.5 18.2761 20.5 18V6ZM3.5 6C3.5 5.72386 3.72386 5.5 4 5.5H13.5C13.7761 5.5 14 5.72386 14 6V18C14 18.2761 13.7761 18.5 13.5 18.5H4C3.72386 18.5 3.5 18.2761 3.5 18V6Z"
    fill={color}
  />
  {#if open}
    <path
      d="M16.75 17.625C16.6119 17.625 16.5 17.5131 16.5 17.375L16.5 6.625C16.5 6.48693 16.6119 6.375 16.75 6.375L19.25 6.375C19.3881 6.375 19.5 6.48693 19.5 6.625L19.5 17.375C19.5 17.5131 19.3881 17.625 19.25 17.625H16.75Z"
      fill={color}
    />
  {:else}
    <path
      d="M19.5 7.625C19.5 7.55596 19.444 7.5 19.375 7.5H16.625C16.556 7.5 16.5 7.55596 16.5 7.625V8.375C16.5 8.44404 16.556 8.5 16.625 8.5H19.375C19.444 8.5 19.5 8.44404 19.5 8.375V7.625Z"
      fill={color}
    />
    <path
      d="M19.5 9.625C19.5 9.55596 19.444 9.5 19.375 9.5H16.625C16.556 9.5 16.5 9.55596 16.5 9.625V10.375C16.5 10.444 16.556 10.5 16.625 10.5H19.375C19.444 10.5 19.5 10.444 19.5 10.375V9.625Z"
      fill={color}
    />
    <path
      d="M19.5 11.625C19.5 11.556 19.444 11.5 19.375 11.5H16.625C16.556 11.5 16.5 11.556 16.5 11.625V12.375C16.5 12.444 16.556 12.5 16.625 12.5H19.375C19.444 12.5 19.5 12.444 19.5 12.375V11.625Z"
      fill={color}
    />
  {/if}
</svg>
